<template>
    <div class="title">
        <titlebox :title="name.title" :imgsrc="name.imgsrc"/>
    </div>
    <div class="top">
        <h2>职业技能培训</h2>
        <Carousel/>
    </div>
    <div class="job">
        <h2>就业资讯</h2>
        <div class="cards">
            <a v-for="job in jobs" :href="job.url" style="text-decoration: none;">
                <Card :title="job.title" :img="job.img" class="card"/>
            </a>
        </div>
    </div>
    <div class="report">
        <h2>网络安全发展报告</h2>
        <div class="cards">
            <a v-for="report in reports" :href="report.url" style="text-decoration: none;">
                <Card :title="report.title" :img="report.img" class="card"/>
            </a>
        </div>
    </div>
</template>

<script lang="ts" setup name="">
    import Carousel from "./carousel/index.vue"
    import Card from './card/index.vue'
    import titlebox from "@/components/titlebox.vue";
    const name = {title:'西湖帮', imgsrc:'https://ioconnectchina.googlecnapps.cn/2023/static/images/xDSxU1cAmsnVfpRU4b6gObzjriwvooUQ75HIJp9uqDPmp1Sqf0yzREoapsCfu29YMNyKEFdJd8cPsRB3J3I5_NApp4v5uYZTPSOYtabkAF9AAsikc0I.png?=w700-rj-sc0x202124'}
    const jobs=[{title:'安恒信息招聘信息',url:'https://ahzp.dbappsecurity.com.cn/',img:'https://www.dbappsecurity.com.cn/Upload/image/20240102/20240102091203_3478.png'},
                {title:'兴汉网络招聘信息',url:'https://nexsec.cn/Content/1499133.html',img:'https://cdn.img-sys.com/comdata/72146/202307/2023071218230396484f.png'},
                {title:'联软科技招聘信息',url:'https://www.leagsoft.com/join', img:'https://www.leagsoft.com/storage/images/2022/01/18/53d596412cb17be25c10019516143b3e.png'}]
    const reports=[{title:'网络信息安全产业人才发展报告2021版',url:'http://www.miitxxzx.org.cn/module/download/downfile.jsp?classid=0&showname=pdf%E9%A2%84%E8%A7%88%20%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E4%BA%A7%E4%B8%9A%E4%BA%BA%E6%89%8D%E5%8F%91%E5%B1%95%E6%8A%A5%E5%91%8A2021%E7%89%88(1).pdf&filename=46b486fba86547b9bab82c5abac0d38e.pdf',img:'../src/assets/help/2021.png'},
                {title:'网络信息安全产业人才发展报告2022版',url:'https://aimg8.dlssyht.cn/u/551001/ueditor/file/276/551001/1666663653775278.pdf',img:'../src/assets/help/2022.png'},
                {title:'网络信息安全产业人才发展报告2023版',url:'https://13115299.s21i.faiusr.com/61/1/ABUIABA9GAAgpMiRqAYowJaAuAQ.pdf', img:'../src/assets/help/2023.png'}]
    
</script>

<style scoped lang="scss">
    .top{
        background-color: black;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 1.047vw;
        height: 36.5vw;
        h2{
            color: white;
            margin-top: 1vw;
            margin-bottom: 1vw;
            
        }
        margin-bottom: 2vw;
    }
    .job{
        height:30vw;
        .cards{
                display: flex;
                justify-content: space-between;       
                .card{
                    display: flex;
                    justify-content: center;             
                    border-radius: 1.0vw;
                }
                .card:hover{
                    border: 2px solid black;
                }
            }
        }
    .report{
        height:35vw;
        .cards{
                display: flex;
                justify-content: space-between;       
                .card{
                    display: flex;
                    justify-content: center;             
                    border-radius: 1.0vw;
                }
                .card:hover{
                    border: 2px solid black;
                }
            }
        }
</style>
